<template>
  <van-cell center :title="name" :label="autor" :id="id">
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon name="play-circle-o" size="0.6rem" @click="playFn(id)" />
    </template>
  </van-cell>
</template>

<script>
export default {
  props: ["name", "autor", "id"],
  methods: {
    playFn(id) {
      this.$router.push({
        path: "/play",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped>
/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>